<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="loginDiv">
    <form id="form" method="post">
        <h1 id="title">用户登录</h1>
        <p>账 号:<input id="username" name="username" type="text"></p>

        <p>密 码:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="登录">
            <input type="reset" class="button" value="重置">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>
</body>
<script>
    let form = document.getElementById("form");
    form.addEventListener('submit', async function (e) {
        e.preventDefault()

        const username = form.elements['username'].value;
        const password = form.elements['password'].value;
        const response = await axios.request({
            url: '/login',
            method: 'post',
            data: {
                account: username,
                password: password
            },
            withCredentials: true,
        })
        window.location.href = '/product.html'

    })
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: url() no-repeat 0px 0px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #loginDiv {
        width: 37%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        background-color: #fff;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }


    p {
        margin-top: 30px;
        margin-left: 20px;
        color: #222323;
    }

    input {
        margin-left: 15px;
        border-radius: 5px;
        /*border-style: hidden;*/
        height: 30px;
        width: 140px;
        background-color: rgba(252, 247, 252, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
        border: 1px solid #eaeaea;
    }

    #username {
        width: 250px;
        color: #1a1b1c;

    }

    #password {
        width: 252px;
        color: #1a1b1c;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(36, 105, 227, 0.7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }

    #subDiv {
        text-align: center;
        margin-top: 30px;
    }

    #title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #1a1b1c;
    }
</style>
</html>